import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_color_plugin/flutter_color_plugin.dart';
import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';
import 'package:yw_bapp/dao/merchant_dao.dart';
import 'package:yw_bapp/model/del_menuItem_model.dart';
import 'package:yw_bapp/model/menu_list_model.dart';
import 'package:yw_bapp/pages/recommended_menu_set.dart';
import 'package:yw_bapp/utils/show_tip_pop.dart';
import 'package:yw_bapp/widgets/custom_route_widget.dart';
import 'package:yw_bapp/widgets/loading_pop_widget.dart';
import 'package:yw_bapp/widgets/m_btn.dart';
import 'package:yw_bapp/widgets/no_data_widget.dart';
import 'package:yw_bapp/widgets/safe_area_bar_widget.dart';
import 'package:yw_bapp/widgets/tip_pop_widget.dart';

// 推荐菜品列表
class RecommendedMenu extends StatefulWidget {
  @override
  _RecommendedMenuState createState() => _RecommendedMenuState();
}

class _RecommendedMenuState extends State<RecommendedMenu> {
  List<Data> menuList;
  bool noData = false;
  @override
  void initState() {
    super.initState();
    // 获取门店菜单列表数据初始化
    _initMenuListData(context);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: XAppBar(
          statusBarColor: ColorUtil.color('#FFC49226'),
          bgColor: ColorUtil.color('#FFC49226'),
          title: "推荐菜品列表",
          fun: () {},
        ),
        body: Container(
          padding: EdgeInsets.fromLTRB(15, 23, 15, 0),
          child: Column(children: [
            // 标题和添加按钮
            Container(
              margin: EdgeInsets.only(bottom: 20),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  InkWell(
                      onTap: () {},
                      splashColor: ColorUtil.color("#FFC49226"),
                      child: Text(
                        "菜品列表",
                        style: TextStyle(
                            color: ColorUtil.color("#FF333333"),
                            fontSize: 15,
                            fontWeight: FontWeight.bold),
                      )),
                  MBtn(
                    btnWidth: 83,
                    btnHeight: 32,
                    borderRadius: 16,
                    title: '添加菜品',
                    hasBg: true,
                    textStyle: TextStyle(fontSize: 13),
                    bgColor: ColorUtil.color("#FFC49226"),
                    borderColor: ColorUtil.color("#FFC49226"),
                    function: () => addMenuItem(),
                  )
                ],
              ),
            ),
            Expanded(
              flex: 1,
              child: !noData
                  ? AnimationLimiter(
                      child: ListView.builder(
                          itemCount: menuList?.length ?? 0,
                          itemBuilder: (BuildContext context, int index) {
                            return AnimationConfiguration.staggeredList(
                                position: index,
                                duration: Duration(milliseconds: 575),
                                child: SlideAnimation(
                                  verticalOffset: 50,
                                  child: FadeInAnimation(
                                    child: _menuItem(menuList[index]),
                                  ),
                                ));
                          }),
                    )
                  : Center(
                      child: NoData(
                        title: '您还没有设置菜品呢',
                      ),
                    ),
            )

            // 菜品列表
          ]),
        ));
  }

  // 菜单项
  Widget _menuItem(Data menuItem) {
    return Card(
      color: Colors.white,
      elevation: 4,
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(20))),
      clipBehavior: Clip.antiAlias,
      semanticContainer: false,
      child: Container(
        height: 145,
        padding: EdgeInsets.fromLTRB(10, 16, 10, 16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 菜品图片
                Image.network(
                  '${menuItem.dishPic}',
                  width: 128,
                  height: 80,
                  fit: BoxFit.cover,
                ),
                // 菜品信息
                Expanded(
                  flex: 1,
                  child: Container(
                    height: 80,
                    margin: EdgeInsets.only(left: 10),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        // 名字和价格
                        Container(
                          margin: EdgeInsets.only(bottom: 8),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                "${menuItem.dishName}",
                                style: TextStyle(
                                    color: Colors.black, fontSize: 15),
                              ),
                              Row(
                                children: [
                                  Text(
                                    "￥",
                                    style: TextStyle(
                                        color: Colors.black,
                                        fontSize: 12,
                                        fontWeight: FontWeight.bold),
                                  ),
                                  Text(
                                    "${menuItem.dishPrice}",
                                    style: TextStyle(
                                        color: Colors.black,
                                        fontSize: 15,
                                        fontWeight: FontWeight.bold),
                                  )
                                ],
                              )
                            ],
                          ),
                        ),
                        // 标签
                        Expanded(
                          flex: 1,
                          child: Wrap(
                            children: _generateList(menuItem.dishLableArr),
                            spacing: 10,
                            runSpacing: 13,
                            alignment: WrapAlignment.spaceEvenly,
                            // crossAxisAlignment: WrapCrossAlignment.end,
                            // runAlignment: WrapAlignment.end,
                          ),
                        ),
                      ],
                    ),
                  ),
                )
              ],
            ),
            // 按钮
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Container(
                  child: MBtn(
                    btnWidth: 52,
                    btnHeight: 28,
                    borderRadius: 14,
                    title: '删除',
                    textStyle: TextStyle(
                        color: ColorUtil.color("#FFE02020"), fontSize: 12),
                    hasBg: false,
                    borderColor: ColorUtil.color("#FFE02020"),
                    function: () {
                      // 删除此菜品
                      // 展示删除菜品的弹窗
                      showCupertinoDialog(
                          context: context,
                          builder: (context) {
                            return iosTipTop(context, '确认删除此菜品？',
                                confirmText: '确定删除',
                                confirmColor: ColorUtil.color("#FFE02020"),
                                cancelCallback: () {
                                  print("点击取消了");
                                },
                                confirmCallback: () =>
                                    deleteMenuItem(context, menuItem));
                          });
                    },
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(left: 10),
                  child: MBtn(
                    btnWidth: 52,
                    btnHeight: 28,
                    borderRadius: 14,
                    title: '编辑',
                    textStyle: TextStyle(fontSize: 12),
                    hasBg: true,
                    borderColor: ColorUtil.color("#FFC49226"),
                    bgColor: ColorUtil.color("#FFC49226"),
                    function: () {
                      // 编辑此菜品
                      editMenuItem(menuItem);
                    },
                  ),
                )
              ],
            )
          ],
        ),
      ),
    );
  }

  // 生成的标签列表Widget
  List<Widget> _generateList(List<String> dishLableArr) {
    return dishLableArr.map((item) => LabelItem(text: item)).toList();
  }

  // 获取门店菜单列表数据初始化
  void _initMenuListData(BuildContext context) {
    MerchantDao.GetMenuList().then((MenuListModel model) => {
          if (model.status == 200)
            {
              setState(() {
                menuList = model.data;
                noData = menuList == null ? true : false;
              })
            }
        });
  }

  void deleteMenuItem(BuildContext context, Data menuItem) {
    MerchantDao.DeleteMenuItem(menuItem.iD).then((DelMenuItemModel model) => {
          if (model.status == 200)
            {
              // 重新请求菜单列表数据
              _initMenuListData(context)
            }
        });
  }

  void editMenuItem(Data menuItem) {
    // 跳转到推荐菜品设置页面
    Navigator.of(context).push(CustomRoute(RecommendedMenuSet(menuId:menuItem.iD), 4));
    LoadingPop.show(context);
  }

  void addMenuItem() {
     Navigator.of(context).push(CustomRoute(RecommendedMenuSet(), 3));
     LoadingPop.show(context);
  }
}

// 构造单个标签Widget
class LabelItem extends StatelessWidget {
  final text;
  LabelItem({Key key, @required this.text});
  @override
  Widget build(BuildContext context) {
    return Container(
      color: ColorUtil.color("#30000000"),
      padding: EdgeInsets.fromLTRB(4, 2, 4, 2),
      child: Text(
        "$text",
        style: TextStyle(color: Colors.black, fontSize: 11),
      ),
    );
  }
}
